<template>
  <div class="home-new" ref="target">
    <!-- 静态数据，不用加冒号 -->
    <HomePanel title="新鲜好物" subTitle="新鲜出炉 品质靠谱">
    <!--------------- 右侧内容 ------------->
    <template #right>
        <XtxMore/>
    </template>
    <!--------------- 主体部分 ------------->
    <!-- 主体数据模板 -->
    <template #default v-if="newList.length ">
      <ul ref="pannel" class="goods-list">
        <li v-for="item in newList" :key="item.id">
          <RouterLink to="/">
            <!-- 绑定v-lazyLoad图片懒加载指令 -->
            <img v-lazyLoad="item.picture" alt="" />
            <p class="name">{{ item.name }}</p>
            <p class="price">&yen;{{ item.price }}</p>
          </RouterLink>
        </li>
      </ul>
    </template>
    <!-- 骨架屏占位模板 -->
    <template #default v-else>
      <ul ref="pannel" class="goods-list">
        <li v-for="item in 4" :key="item">
          <XtxSkeleton :width="306" :height="406"></XtxSkeleton>
        </li>
      </ul>
    </template>
    </HomePanel>
  </div>
</template>

<script>
import { getNewListAPI } from '@/api/home'
import HomePanel from './home-panel.vue'
import { ref } from 'vue'

// 导入组合式API
// useIntersectionObserver 检测DOM元素是否在可视区域
import { useIntersectionObserver } from '@vueuse/core'
export default {
  components: { HomePanel },
  setup () {
    // 定义新鲜好物列表数据
    const newList = ref([])
    // target监视的目标DOM元素，既可以是ref对象也是原生DOM
    const target = ref(null)

    // 调用useIntersectionObserver方法监视DOM
    // 调用stop(),用来结束监视
    const { stop } = useIntersectionObserver(
      target,
      ([{ isIntersecting }]) => {
        // isIntersecting: 布尔值，表示监视的DOM元素是否出现在可视区，是true,否则false
        // 当新鲜好物出现在可视区时，才发获取新鲜好物的请求
        if (isIntersecting) {
          // 调用获取新鲜好物数据函数
          getNewList()
          // 结束监听
          stop()
        }
      }
    )
    // 获取新鲜好物列表数据函数
    async function getNewList () {
      // 发起获取新鲜好物数据请求
      const res = await getNewListAPI()
      // 赋值
      newList.value = res.result
    }
    return {
      newList,
      target
    }
  }

}
</script>

<style scoped lang='less'>
.goods-list {
  display: flex;
  justify-content: space-between;
  height: 406px;
  li {
    width: 306px;
    height: 406px;
    background: #f0f9f4;
    img {
      width: 306px;
      height: 306px;
    }
    p {
      font-size: 22px;
      padding-top: 12px;
      text-align: center;
      text-overflow: ellipsis;
      overflow: hidden;
      white-space: nowrap;
    }
    .price {
      color: @priceColor;
    }
  }
}
</style>
